<template>
  <i :class="iconClass" :style="iconStyle" v-bind="$attrs">
    <!-- SVG 图标 -->
    <svg
      v-if="isSvgIcon"
      :width="size"
      :height="size"
      :viewBox="svgViewBox"
      fill="currentColor"
    >
      <path :d="svgPath" />
    </svg>

    <!-- 字体图标内容 -->
    <span v-else-if="iconContent" v-html="iconContent"></span>
  </i>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface Props {
  name: string;
  size?: string | number;
  color?: string;
  spin?: boolean;
  pulse?: boolean;
  flip?: "horizontal" | "vertical" | "both";
  rotate?: number;
  type?: "outline" | "filled" | "duotone";
}

const props = withDefaults(defineProps<Props>(), {
  size: 16,
  type: "outline",
});

// SVG 图标路径映射
const svgIcons: Record<string, { path: string; viewBox?: string }> = {
  // 基础图标
  home: {
    path: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
    viewBox: "0 0 24 24",
  },
  dashboard: {
    path: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",
    viewBox: "0 0 24 24",
  },
  menu: {
    path: "M4 6h16M4 12h16M4 18h16",
    viewBox: "0 0 24 24",
  },
  x: {
    path: "M6 18L18 6M6 6l12 12",
    viewBox: "0 0 24 24",
  },
  plus: {
    path: "M12 6v6m0 0v6m0-6h6m-6 0H6",
    viewBox: "0 0 24 24",
  },
  minus: {
    path: "M20 12H4",
    viewBox: "0 0 24 24",
  },
  search: {
    path: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
    viewBox: "0 0 24 24",
  },
  filter: {
    path: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z",
    viewBox: "0 0 24 24",
  },
  sort: {
    path: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12",
    viewBox: "0 0 24 24",
  },

  // 导航图标
  "chevron-left": {
    path: "M15 18l-6-6 6-6",
    viewBox: "0 0 24 24",
  },
  "chevron-right": {
    path: "M9 18l6-6-6-6",
    viewBox: "0 0 24 24",
  },
  "chevron-up": {
    path: "M18 15l-6-6-6 6",
    viewBox: "0 0 24 24",
  },
  "chevron-down": {
    path: "M6 9l6 6 6-6",
    viewBox: "0 0 24 24",
  },
  "arrow-left": {
    path: "M10 19l-7-7m0 0l7-7m-7 7h18",
    viewBox: "0 0 24 24",
  },
  "arrow-right": {
    path: "M14 5l7 7m0 0l-7 7m7-7H3",
    viewBox: "0 0 24 24",
  },
  "arrow-up": {
    path: "M5 10l7-7m0 0l7 7m-7-7v18",
    viewBox: "0 0 24 24",
  },
  "arrow-down": {
    path: "M19 14l-7 7m0 0l-7-7m7 7V3",
    viewBox: "0 0 24 24",
  },

  // 用户相关
  user: {
    path: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
    viewBox: "0 0 24 24",
  },
  "user-group": {
    path: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a4 4 0 11-8 0 4 4 0 018 0z",
    viewBox: "0 0 24 24",
  },
  "user-add": {
    path: "M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z",
    viewBox: "0 0 24 24",
  },

  // 消息通信
  message: {
    path: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z",
    viewBox: "0 0 24 24",
  },
  "message-square": {
    path: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z",
    viewBox: "0 0 24 24",
  },
  send: {
    path: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8",
    viewBox: "0 0 24 24",
  },
  mail: {
    path: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
    viewBox: "0 0 24 24",
  },

  // 通知
  bell: {
    path: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9",
    viewBox: "0 0 24 24",
  },
  "bell-off": {
    path: "M13.73 21a2 2 0 01-3.46 0M18.63 13A17.89 17.89 0 0118 8M6.26 6.26A5.86 5.86 0 006 8c0 7-3 9-3 9h14M3 3l18 18",
    viewBox: "0 0 24 24",
  },

  // 设置
  settings: {
    path: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z",
    viewBox: "0 0 24 24",
  },
  preferences: {
    path: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100-4m0 4v2m0-6V4",
    viewBox: "0 0 24 24",
  },

  // 文件和文档
  document: {
    path: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
    viewBox: "0 0 24 24",
  },
  folder: {
    path: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z",
    viewBox: "0 0 24 24",
  },
  "folder-open": {
    path: "M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z",
    viewBox: "0 0 24 24",
  },
  book: {
    path: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253",
    viewBox: "0 0 24 24",
  },
  "book-open": {
    path: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253",
    viewBox: "0 0 24 24",
  },

  // 媒体
  image: {
    path: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z",
    viewBox: "0 0 24 24",
  },
  video: {
    path: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z",
    viewBox: "0 0 24 24",
  },
  volume: {
    path: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M11 5L6 9H2v6h4l5 4V5z",
    viewBox: "0 0 24 24",
  },
  "volume-off": {
    path: "M5.586 15H2v-6h3.586l5.707-5.707A1 1 0 0113 4v16a1 1 0 01-1.707.707L5.586 15z M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2",
    viewBox: "0 0 24 24",
  },

  // 状态
  check: {
    path: "M5 13l4 4L19 7",
    viewBox: "0 0 24 24",
  },
  "check-circle": {
    path: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
    viewBox: "0 0 24 24",
  },
  "x-circle": {
    path: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
    viewBox: "0 0 24 24",
  },
  "alert-circle": {
    path: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
    viewBox: "0 0 24 24",
  },
  info: {
    path: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
    viewBox: "0 0 24 24",
  },

  // 操作
  edit: {
    path: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z",
    viewBox: "0 0 24 24",
  },
  trash: {
    path: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16",
    viewBox: "0 0 24 24",
  },
  copy: {
    path: "M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3",
    viewBox: "0 0 24 24",
  },
  download: {
    path: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4",
    viewBox: "0 0 24 24",
  },
  upload: {
    path: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12",
    viewBox: "0 0 24 24",
  },

  // 时间
  clock: {
    path: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
    viewBox: "0 0 24 24",
  },
  history: {
    path: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z",
    viewBox: "0 0 24 24",
  },
  calendar: {
    path: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z",
    viewBox: "0 0 24 24",
  },

  // 工具
  tool: {
    path: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z",
    viewBox: "0 0 24 24",
  },
  wrench: {
    path: "M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 011-1h1a2 2 0 100-4H7a1 1 0 01-1-1V7a1 1 0 011-1h3a1 1 0 001-1V4z",
    viewBox: "0 0 24 24",
  },

  // 数据和分析
  chart: {
    path: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z",
    viewBox: "0 0 24 24",
  },
  "bar-chart": {
    path: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z",
    viewBox: "0 0 24 24",
  },
  analytics: {
    path: "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z",
    viewBox: "0 0 24 24",
  },

  // 网络和连接
  wifi: {
    path: "M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0",
    viewBox: "0 0 24 24",
  },
  globe: {
    path: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9",
    viewBox: "0 0 24 24",
  },
  link: {
    path: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1",
    viewBox: "0 0 24 24",
  },

  // 安全
  shield: {
    path: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
    viewBox: "0 0 24 24",
  },
  lock: {
    path: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z",
    viewBox: "0 0 24 24",
  },
  unlock: {
    path: "M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z",
    viewBox: "0 0 24 24",
  },

  // 主题
  sun: {
    path: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z",
    viewBox: "0 0 24 24",
  },
  moon: {
    path: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z",
    viewBox: "0 0 24 24",
  },

  // 其他
  heart: {
    path: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z",
    viewBox: "0 0 24 24",
  },
  star: {
    path: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z",
    viewBox: "0 0 24 24",
  },
  eye: {
    path: "M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z",
    viewBox: "0 0 24 24",
  },
  "eye-off": {
    path: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21",
    viewBox: "0 0 24 24",
  },
  refresh: {
    path: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15",
    viewBox: "0 0 24 24",
  },
  "external-link": {
    path: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14",
    viewBox: "0 0 24 24",
  },
  "help-circle": {
    path: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
    viewBox: "0 0 24 24",
  },
  list: {
    path: "M4 6h16M4 10h16M4 14h16M4 18h16",
    viewBox: "0 0 24 24",
  },
  grid: {
    path: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",
    viewBox: "0 0 24 24",
  },
  maximize: {
    path: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4",
    viewBox: "0 0 24 24",
  },
  minimize: {
    path: "M9 9l-5 5m0 0v-4m0 4h4M15 9l5 5m0 0v-4m0 4h-4",
    viewBox: "0 0 24 24",
  },
  "log-out": {
    path: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1",
    viewBox: "0 0 24 24",
  },
  api: {
    path: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z",
    viewBox: "0 0 24 24",
  },
  translate: {
    path: "M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129",
    viewBox: "0 0 24 24",
  },
  monitor: {
    path: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
    viewBox: "0 0 24 24",
  },
  overview: {
    path: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z",
    viewBox: "0 0 24 24",
  },
};

// 计算图标类名
const iconClass = computed(() => {
  const classes = ["icon"];

  if (props.spin) classes.push("icon-spin");
  if (props.pulse) classes.push("icon-pulse");
  if (props.flip) classes.push(`icon-flip-${props.flip}`);
  if (props.rotate) classes.push("icon-rotate");

  return classes.join(" ");
});

// 计算图标样式
const iconStyle = computed(() => {
  const styles: Record<string, string> = {};

  if (props.size) {
    const size =
      typeof props.size === "number" ? `${props.size}px` : props.size;
    styles.width = size;
    styles.height = size;
  }

  if (props.color) {
    styles.color = props.color;
  }

  if (props.rotate && typeof props.rotate === "number") {
    styles.transform = `rotate(${props.rotate}deg)`;
  }

  return styles;
});

// 判断是否为 SVG 图标
const isSvgIcon = computed(() => {
  return Object.prototype.hasOwnProperty.call(svgIcons, props.name);
});

// 获取 SVG 路径
const svgPath = computed(() => {
  return svgIcons[props.name]?.path || "";
});

// 获取 SVG viewBox
const svgViewBox = computed(() => {
  return svgIcons[props.name]?.viewBox || "0 0 24 24";
});

// 字体图标内容（用于扩展其他图标库）
const iconContent = computed(() => {
  // 这里可以扩展其他图标库的支持
  // 例如 Font Awesome、Material Icons 等
  return "";
});
</script>

<style scoped>
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  user-select: none;
}

.icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 动画效果 */
.icon-spin {
  animation: icon-spin 2s linear infinite;
}

.icon-pulse {
  animation: icon-pulse 2s ease-in-out infinite;
}

/* 翻转效果 */
.icon-flip-horizontal {
  transform: scaleX(-1);
}

.icon-flip-vertical {
  transform: scaleY(-1);
}

.icon-flip-both {
  transform: scale(-1);
}

/* 旋转动画 */
@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 脉冲动画 */
@keyframes icon-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 响应式大小 */
@media (max-width: 768px) {
  .icon {
    width: 20px;
    height: 20px;
  }
}
</style>
